<template>
  <div class="about-page">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>
    <!-- video -->
    <section class="video">
      <div class="introduce">
        <video :src="videoUrl" id="video" @click="play" v-if="videoUrl"></video>
        <video src="https://www.idcm.io/download/about.mp4" id="video" @click="play" v-else></video>
        <div id="play"></div>
        <div class="text"></div>
      </div>
    </section>
    <!-- 聚合“中心化”和“去中心化”的优势 -->
    <div class="about-contentDiy" v-if="aboutContent.Content" v-html="aboutContent.Content"></div>
    <div class="about-content" v-else>
      <section class="center">
        <div class="body">
          <div class="header">
            <h3>{{lang.about2}}</h3>
            <h4>{{lang.about3}}</h4>
            <img src="./images/icon-idca.png" alt="">
          </div>
          <ul class="list">
            <li class="item">
              <img src="./images/security.png" alt="">
              <h3>{{lang.about4}}</h3>
              <p>{{lang.about5}}</p>
            </li>
            <li class="item">
              <img src="./images/fluidity.png" alt="">
              <h3>{{lang.about6}}</h3>
              <p>{{lang.about7}}</p>
            </li>
            <li class="item">
              <img src="./images/alliance.png" alt="">
              <h3>{{lang.about8}}</h3>
              <p>{{lang.about9}}</p>
            </li>
            <li class="item">
              <img src="./images/transparent.png" alt="">
              <h3>{{lang.about10}}</h3>
              <p>{{lang.about11}}</p>
            </li>
          </ul>
        </div>
      </section>
      <!-- 当前交易所的弊病 -->
      <section class="defect">
        <div class="defect-header">{{lang.about12}}</div>
        <div class="about">
          <div class="list">
            <div class="header">{{lang.about13}}</div>
            <ul>
              <li>
                <div class="title"><img src="./images/harm1.png"/>{{lang.about14}}</div>
                <div class="content">{{lang.about15}}</div>
              </li>
              <li>
                <div class="title"><img src="./images/harm2.png"/>{{lang.about16}}</div>
                <div class="content" v-html="lang.about17"></div>
              </li>
              <li>
                <div class="title"><img src="./images/harm3.png"/>{{lang.about18}}</div>
                <div class="content">{{lang.about19}}</div>
              </li>
              <li>
                <div class="title"><img src="./images/harm4.png"/>{{lang.about20}}</div>
                <div class="content">{{lang.about21}}</div>
              </li>
            </ul>
          </div>

          <div class="list">
            <div class="header">{{lang.about21_1}}</div>
            <ul>
              <li>
                <div class="title"><img src="./images/harm5.png"/>{{lang.about22}}</div>
                <div class="content">{{lang.about23}}</div>
              </li>
              <li>
                <div class="title"><img src="./images/harm6.png"/>{{lang.about24}}</div>
                <div class="content">{{lang.about25}}</div>
              </li>
              <li>
                <div class="title"><img src="./images/harm7.png"/>{{lang.about26}}</div>
                <div class="content">{{lang.about27}}</div>
              </li>
              <li>
                <div class="title"><img src="./images/harm8.png"/>{{lang.about28}}</div>
                <div class="content">{{lang.about29}}</div>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!-- IDCA联盟交易所解决方案 -->
      <section class="IDCA">
        <div class="header">
            <h3>{{lang.about30}}</h3>
            <h4>{{lang.about31}}</h4>
        </div>
        <ul>
          <li>
            <img src="./images/IDCA1.png">
            <h3>{{lang.about32}}</h3>
            <p>{{lang.about33}}</p>
          </li>
          <li>
            <img src="./images/IDCA2.png" >
            <h3>{{lang.about34}}</h3>
            <p>{{lang.about35}}</p>
          </li>
          <li>
            <img src="./images/IDCA4.png">
            <h3>{{lang.about36}}</h3>
            <p>{{lang.about37}}</p>
          </li>
          <li>
            <img src="./images/IDCA3.png">
            <h3>{{lang.about38}}</h3>
            <p>{{lang.about39}}</p>
          </li>
          <li>
            <img src="./images/IDCA6.png">
            <h3>{{lang.about40}}</h3>
            <p>{{lang.about41}}</p>
          </li>
          <li>
            <img src="./images/IDCA5.png">
            <h3>{{lang.about42}}</h3>
            <p>{{lang.about43}}</p>
          </li>
        </ul>
      </section>
      <!-- IDCG旗下交易所联盟+DAPP平台+DAICO孵化平台 -->
      <section class="IDCG">
        <div class="header">
            <h3>{{lang.about44}}</h3>
            <h4>{{lang.about45}}</h4>
        </div>

        <div class="section">
            <ul>
              <li>
                <div class="title">{{lang.about46}}</div>
                <div class="img"><img src="./images/idcr1.png"></div>
                <p>{{lang.about47}}</p>
              </li>

              <li>
                <div class="title">{{lang.about48}}</div>
                <div class="img"><img src="./images/idcr2.png"></div>
                <p>{{lang.about49}}</p>
              </li>

              <li>
                <div class="title">{{lang.about50}}</div>
                <div class="img"><img src="./images/idcr3.png"></div>
                <p>{{lang.about51}}</p>
              </li>
            </ul>
        </div>

        <div class="footer" v-if="1===2">
          <p>{{lang.about52}}</p>
          <a href="http://idcg.io" target="_blank" class="btn">{{lang.about53}}</a>
        </div>
      </section>
      <!-- 创始团队 -->
      <section class="team">
        <div class="header">
            <h3>{{lang.about54}}</h3>
          </div>
          <div class="section">
            <div class="content">
              <p>{{lang.about55}}</p>
              <p>{{lang.about56}}</p>
              <p>{{lang.about57}}</p>
            </div>
            <div class="imgs">
              <div class="img">
                <img src="./images/team-leader.png">
                <div class="str">
                  <h4>{{lang.about58}}</h4>
                  <span>{{lang.about59}}</span>
                </div>
              </div>

              <div class="img">
                <img src="./images/team-ceo.png">
                <div class="str">
                  <h4>{{lang.about60}}</h4>
                  <span>{{lang.about61}}</span>
                </div>
              </div>

              <div class="img">
                <img src="./images/team-coo.png">
                <div class="str">
                  <h4>{{lang.about62}}</h4>
                  <span>{{lang.about63}}</span>
                </div>
              </div>
            </div>

            <div class="team-img">
              <div class="str">
                  <img src="./images/team.png">
                  <h4>{{lang.about64}}</h4>
              </div>
            </div>
          </div>
      </section>
    </div>
    <!-- 页脚 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      video: {},
      videoUrl: '',
      aboutContent: {},
    }
  },
  components: { },
  watch: {
    langKey () {
      this.langKeyIs()
    }
  },
  methods: {
    // 获取服务数据内容
    getAboutContent () {
      let self = this
      this.$http.post('Home/GetAbout', {})
      .then((res) => {
        if (res) {
          self.aboutContent = res.Data || []
          self.videoUrl = self.aboutContent.Url
        }
      })
    },
    langKeyIs () {
      if (this.langKey === 'zh-CN' || this.langKey === 'zh-Hant') {
        this.coinIntroduceUrl = this.langKey
      } else {
        this.coinIntroduceUrl = 'en'
      }
    },
    play () {
      // 暂停中，单击播放
      if (this.video[0].paused) {
        this.video[0].play()
        $('#play').css('display', 'none')
          // 否则，单击暂停
      } else {
        this.video[0].pause()
        $('#play').css('display', 'block')
      }
    },
    // 播放结束，加上播放图标
    end () {
      this.video[0].addEventListener('ended', () => {
        $('#play').css('display', 'block')
      })
    }
  },
  mounted () {
    this.getAboutContent()
    this.video = $('#video')
    this.end()
  }
}
</script>
<style lang="less">
  .about-page {
    min-width: 780px;
    .about-contentDiy {
      img {
        max-width: 100%;
        height: auto;
      }
    }
    .video {
      width: 100%;
      background: black url('./images/background.png') no-repeat center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;

      .introduce {
        width: 1074px;
        overflow: hidden;
        border-radius: 10px;
        position: relative;

        video {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }

        .text {
          position: absolute;
          color: #fff;
          font-size: 20px;
          bottom: 20px;
          left: 40px;
        }

        #play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90px;
          height: 90px;
          background: url('./images/play-default.png') no-repeat center;
          background-size: cover;
          transition: all 0.5s ease;
          pointer-events: none;
          cursor: pointer;
        }
      }
    }

    .center {
      width: 100%;
      background-color: #081428;
      color: white;
      padding: 50px 0;
      text-align: center;

      .body {
        max-width: 1200px;
        margin: 0 auto;

        .header {
          h3 {
            width: 100%;
            max-width: 800px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            display: inline-block;
            background: url('./images/header-background.png') no-repeat center;
            background-size: cover;
            font-size: 20px;
          }

          h4 {
            margin: 40px 0;
            font-size: 18px;
          }
        }

        .list {
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;

          .item {
            width: 240px;
            min-height: 232px;
            box-sizing: border-box;
            text-align: center;
            background-color: #101E36;
            border-radius: 10px;
            padding: 25px 0;
            word-break: break-all;
            margin: 30px 20px 0 0;
            img {
              margin-bottom: 10px;
            }
            h3 {
              margin: 0 0 20px;
              font-size: 14px;
            }
            p {
              font-size: 12px;
              line-height: 24px;
              text-align: left;
              padding: 0 15px;
            }
          }
        }
      }
    }

    .defect {
      background-color: #101E36;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px 0 50px 0;

      .defect-header {
        font-size: 20px;
        color: #fff;
        position: relative;

        &:after {
          content: '';
          width: 50px;
          height: 2px;
          background-color: #2E7FCF;
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .about {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .list {
          text-align: left;
          flex: 1;
          margin-right: 250px;

          .header {
            display: inline-block;
            font-size: 18px;
            color: #fff;
            padding: 12px 25px;
            border: dashed 1px #FFFFFF;
            border-radius: 100px;
            margin: 60px 0 50px 0;
          }

          ul {
            color: #fff;
            li {
              margin-bottom: 20px;

              .title {
                font-size: 16px;
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                img {
                  margin-right: 10px;
                }
              }

              .content {
                font-size: 14px;
                line-height: 24px;
              }
            }
          }
        }

        .list:first-child {
          padding-left: 60px;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }

    .IDCA {
      color: #fff;
      text-align: center;
      padding: 50px 0;

      .header {
        h3 {
          width: 100%;
          max-width: 800px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          display: inline-block;
          background: url('./images/header-background.png') no-repeat center;
          background-size: cover;
          font-size: 20px;
        }

        h4 {
          margin: 30px 0;
          font-size: 18px;
        }
      }

      ul {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: 370px;
          margin-top: 50px;
          background: url('./images/IDCA-bg.png') no-repeat center;
          background-size: cover;
          padding: 0 41px;
          box-sizing: border-box;
          text-align: center;
          border-radius: 5px;
          padding: 30px 20px;

          img {
            margin-bottom: 32px;
          }

          h3 {
            font-size: 16px;
            margin-bottom: 34px;
            text-align: center;
            line-height: 24px;
            height: 48px;
            overflow: hidden;
          }

          p {
            font-size: 14px;
            line-height: 23px;
            text-align: left;
          }
        }
      }
    }

    .IDCG {
      color: #fff;
      text-align: center;
      background: url('./images/idcg-bg.png') no-repeat center;
      background-size: cover;
      padding: 50px 0;

      .header {
        h3 {
          width: 100%;
          max-width: 800px;
          height: 80px;
          line-height: 80px;
          font-size: 20px;
          text-align: center;
          display: inline-block;
          background: url('./images/header-background.png') no-repeat center;
          background-size: cover;
        }

        h4 {
          margin: 30px 0;
          font-size: 18px;
        }
      }

      .section {
        ul {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;

          li {
            width: 370px;
            padding: 30px 35px;
            box-sizing: border-box;
            background: url('./images/idcr-border.png') no-repeat center;
            background-size: 100% 100%;

            .title {
              display: inline-block;
              padding: 15px 0;
              font-size: 16px;
              background: url('./images/idcr-title.png') no-repeat center;
              background-size: cover;
              margin: 10px auto 30px;
              width: 300px;
              box-sizing: border-box;
              border-radius: 5px;
              overflow: hidden;
            }

            .img {
              margin-bottom: 30px;
              border-radius: 5px;
              overflow: hidden;
            }

            p {
              text-align: left;
              line-height: 20px;
            }

            &:nth-child(even) {
              background: url('./images/idcr-border2.png') no-repeat center;
              background-size: 100% 100%;
            }
          }
        }
      }

      .footer {
        p {
          width: 58%;
          margin: 0 auto 40px;
          font-size: 14px;
          color: #6E9CF3;
          line-height: 20px;
        }

        .btn {
          display: inline-block;
          padding: 15px 30px;
          font-size: 16px;
          background: #3782FF;
          border-radius: 4px;
          min-width: 200px;
          box-sizing: border-box;
          color: white;
        }
      }
    }

    .team {
      color: #fff;
      text-align: center;
      padding: 50px 0 0 0;
      margin: 0 auto;

      .header {
        h3 {
          width: 100%;
          max-width: 800px;
          height: 80px;
          line-height: 80px;
          font-size: 20px;
          text-align: center;
          display: inline-block;
          background: url('./images/header-background.png') no-repeat center;
          background-size: cover;
          margin-bottom: 50px;
        }
      }
      .section {
        width: 95%;
        margin: 0 auto;
        max-width: 1200px;
        .content {
          text-align: left;
          line-height: 24px;

          p {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 40px;
          }
        }

        .imgs {
          display: flex;
          justify-content: space-between;

          .img {
            position: relative;

            img {
              border-radius: 8px;
            }
            .str {
              position: absolute;
              width: 100%;
              bottom: 0px;
              padding: 35px 0  10px 20px;
              text-align: left;
              background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, #000000 97%);
              border-radius: 0 0 8px 8px;
              box-sizing: border-box;

              h4 {
                font-size: 16px;
                margin-bottom: 10px;
              }

              span {
                font-size: 14px;
                color: #DDD;
              }
            }
          }
        }
        .team-img {
          margin: 50px auto;
          .str {
            position: relative;

            img {
              border-radius: 8px;
              width: 100%;
              height: auto;
            }

            h4 {
              font-size: 20px;
              position: absolute;
              width: 100%;
              bottom: 0px;
              padding: 35px 0 30px 0;
              text-align: left;
              background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, #000000 97%);
              border-radius: 0 0 8px 8px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1200px){
    .about-page {

      .video {
        width: 100%;
        padding: 0;

        .introduce {
          width: 100%;
          border-radius: 0;
        }
      }

      .center .body {
        width: 100%;

        .list {
          width: 70%;
        }
      }

      .defect .about {

        .list {
          margin: 0;
          margin-right: 100px;
        }
      }

      .IDCA ul {
        width: 760px;

        li {
          margin-top: 20px;
        }
      }

      .IDCG .section ul {
        width: 770px;
        flex-wrap: wrap;
        justify-content: center;

        li:nth-child(1) {
          margin: 10px 30px 40px;
        }
        li:nth-child(2) {
          background: url('./images/idcr-border.png') no-repeat center;
          background-size: 100% 100%;
          margin-right: 25px;
        }
      }

      .team {
        .section {

          .team-img {
            margin: 30px auto;
          }
          .imgs {
            flex-wrap: wrap;
            justify-content: center;

            .img:nth-child(1) {
              margin: 0 20% 22px;
            }

            .img:nth-child(2) {
              margin-right: 60px;
            }
          }
        }
      }
    }
  }
</style>
